layui.use(['form','jquery','table'], function () {
    var form = layui.form,
        layer = layui.layer,
        table = layui.table,
        $ = layui.jquery;


    var tableIns = table.render({
        //
        id: 'readerTable',
        // 容器的id（即表格table的id属性值）  #：表示绑定id
        elem: '#currentTableId',
        // 容器的高度 full-差值
        height: 'full-125',
        // 访问数据的url （后台的数据接口）
        url: ctx + '/reader',   //数据接口
        // 开启分页
        page: true,
        // 单元格的最小宽度
        cellMinWidth: 95,
        // 每页页数的可选项
        limits: [10, 15, 20, 25, 50, 100],
        // 默认每页显示的数量
        limit: 10,
        // 设定表格各种外观、尺寸等
        skin: 'line',
        // 开启头部工具栏
        toolbar: '#toolbarDemo',
        //
        defaultToolbar: ['filter', 'exports', 'print', {
            title: '提示',
            layEvent: 'LAYTABLE_TIPS',
            icon: 'layui-icon-tips'
        }],

        cols: [[   //表头
            // field 要求field属性值与返回的数据中对应的属性字段名一致
            // title 设置列的标题
            // sort 是否允许排序（默认false）
            // fixed 固定列
            {type: "checkbox", fixed:'center',width: 50},
            {field: 'id', title: 'ID', sort: true},
            {field: 'readerName', title: '用户名'},
            {field: 'sex', title: '性别'},
            {field: 'registerDate', title: '注册时间'},
            {field: 'readerType', title: '读者身份类型',},
            {field: 'phone', title: '手机号'},
            {field: 'address', title: '家庭地址'},
            {field: 'updateTime', title: '更新时间'},
            {field: 'idCard', title: '身份证号'},
            {field: 'violationTimes', title: '违规次数',sort: true},
            {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
        ]],
    });

    /*
    * 搜索按钮的点击事件绑定
    * */
    $("#serchreader").click(function(){
        // 表格重载  多条件查询
        tableIns.reload({
            // 设置需要传递给后台的参数
            where: {
                //读者姓名 (与后台接受 的参数保持一致，此处因为后台接受的是一个javabean对象，所以要与javabean中的属性字段保持一致)
                // 获取文本框的值，传递到后台
                readerName: $("input[name='username']").val(),
                phone: $("input[name='phone']").val(),   //读者电话
                idCard: $("input[name='idcard']").val()   //读者身份证号
            },
            page: {
                curr: 1  //默认从第一页开始
            }
        });
    });


    /*
    * 监听头部工具栏事件
    *   currentTableFilter：表格的lay-filter属性值
    * */
    table.on('toolbar(currentTableFilter)',function (data){
        // data.event :对应的元素上设置的lay-event的属性值
        if(data.event === "add"){
            // 添加操作
            open_edit_Reader();
        }else if(data.event === "delete"){
            // 多行数据删除操作
            deleteReader(data);
        }
    });

    /*
    * 打开添加或者修改读者信息的窗口
    * */
    function open_edit_Reader(readerId){
        // 弹出层的标题
        var title = "<h3>读者管理---添加读者</h3>";
        var url = "add_edit";

        // 判断readerId是否为空
        if (null != readerId && '' !== readerId){
            title = "<h3>读者管理---修改读者信息</h3>";
            url += '?readerId='+readerId;
        }
        // iframe
        layer.open({
            // 表示 iframe层，即第二层
            type: 2,
            // 标题
            title: title,
            // 宽高
            area: ['500px','600px'],
            // 请求后台转发跳转的url路径
            content: url,
            // 最大化最小化
            maxmin: true
        });

    }

    /*
    * 多行数据删除操作
    * */
    function deleteReader(data){
        // 获取数据表格选中的行数据
        var checkStatus = table.checkStatus("readerTable");
        // 获取所有被选中的记录对应的数据
        var readerData = checkStatus.data;
        // 判断是否选择了要删除的记录，（选中行的数量大于0；）
        if (readerData.length < 1){
            layer.msg("请选择要删除的记录！",{icon:5});
            return;
        }
        // 询问用户是否确认删除
        layer.confirm("确定删除吗！",{icon: 3,title:"读者管理"},function (index){
            // 关闭确认框
            layer.close(index);
            // 传递参数  ，数组   ids=1&ids=2&ids=3
            var ids = "ids=";
            // 循环选中的行记录的数据
            for(var i = 0;i<readerData.length;i++){
                if(i<readerData.length-1){
                    ids = ids + readerData[i].id +"&ids="
                }else {
                    ids = ids + readerData[i].id;
                }
            }
            // 发送ajax请求，执行删除多行数据操作
            $.ajax({
                type: "post",
                url: ctx + "/delete",
                data: ids,  // 传递参数  ，数组   ids=1&ids=2&ids=3
                success: function (result){
                    // 判断删除结果
                    if (result.code === 200){
                        // 提示成功
                        layer.msg("删除成功！",{icon:6});
                        // 刷新表格
                        tableIns.reload();
                    }else {
                        // 执行失败  提示信息
                        layer.msg(result.msg,{icon:5});
                    }
                }
            });
        });
    }

    /*
    * 监听行工具栏
    *      currentTableFilter：表格的lay-filter属性值
    * */
    table.on('tool(currentTableFilter)',function (data){
        // data.event :对应的元素上设置的lay-event的属性值
        // 判断类型，即做什么操作
        if(data.event === "edit"){
            // 得到要修改的读者的对应的Id
            var readerId = data.data.id;
            // 修改操作
            open_edit_Reader(readerId);
        }else if(data.event === "deletes"){
            // 单行数据删除操作
            // 弹出确认框，询问是否确认删除
            layer.confirm("确认删除吗？",{icon:3,title:"读者管理"},function (index){
               // 关闭确认框
               layer.close(index);
               // 发送ajax请求，删除数据
                $.ajax({
                    type: "post",
                    url: ctx + "/delete",
                    data: {
                        ids: data.data.id
                    },
                    success: function (result){
                        // 判断删除结果
                        if (result.code === 200){
                            // 提示成功
                            layer.msg("删除成功！",{icon:6});
                            // 刷新表格
                            tableIns.reload();
                        }else {
                            // 执行失败  提示信息
                            layer.msg(result.msg,{icon:5});
                        }
                    }
                });
            });
        }
    });

})